<template>
	<view class="progress-page">
		<view class="page-header">
			<view class="header-content">
				<view class="title">我的入党进度</view>
				<view class="subtitle">{{ user.name }}的党员发展历程</view>
			</view>
		</view>

		<view class="progress-info">
			<view class="current-status">
				<view class="label">当前状态</view>
				<view class="value">
					<text class="status-badge">{{ user.politicalStatus || '未知' }}</text>
				</view>
			</view>

			<view class="join-time" v-if="currentStageTime">
				<view class="label">当前阶段时间</view>
				<view class="value">{{ currentStageTime }}</view>
			</view>
		</view>

		<view class="progress-card">
			<view class="card-title">
				<text>发展阶段</text>
			</view>
			<view class="progress-container">
				<party-progress :stages="progressStages" :active-index="currentIndex" />

				<view class="stage-desc" v-if="currentStageDesc">
					<view class="desc-title">阶段说明</view>
					<view class="desc-content">{{ currentStageDesc }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { userInfo, userStatus } from '@/common/js/api.js';
import PartyProgress from '@/components/PartyProgress/PartyProgress.vue';

// 用户信息
const user = ref({
	account: '',
	age: 0,
	avatarUrl: '',
	gender: null,
	name: '',
	phone: '',
	pwd: '',
	politicalStatus: ''
});

// 模拟数据 - 用户党员发展阶段列表
const progressStages = ref([
	{
		title: '群众',
		desc: ''
	},
	{
		title: '入党积极分子',
		desc: ''
	},
	{
		title: '发展对象',
		desc: ''
	},
	{
		title: '预备党员',
		desc: ''
	},
	{
		title: '正式党员',
		desc: ''
	}
]);

// 当前阶段索引
const currentIndex = ref(0);

// 各阶段说明文本
const stageDescriptions = {
	'群众': '作为群众，您可以通过了解党的知识、参加党组织活动，并向党组织提交《入党申请书》表达入党意愿。',
	'入党积极分子': '作为入党积极分子，您需要通过党课学习、参加组织活动，并撰写思想汇报，接受党组织的培养和考察。',
	'发展对象': '作为发展对象，您需要填写《入党志愿书》，通过党支部大会讨论，等待上级党组织批准。',
	'预备党员': '作为预备党员，您需要在预备期内继续接受考察，履行党员义务，缴纳党费，并在预备期满后提出转正申请。',
	'正式党员': '作为正式党员，您需要严格遵守党的章程，履行党员义务，按时缴纳党费，参加组织生活。'
};

// 当前阶段说明
const currentStageDesc = computed(() => {
	const status = user.value.politicalStatus;
	return stageDescriptions[status] || '暂无说明';
});

// 当前阶段时间
const currentStageTime = ref('');
const userId = uni.getStorageSync('userId');

onLoad(() => {
	// 显示加载中
	uni.showLoading({
		title: '加载中'
	});

	// 获取用户信息和状态
	userInfo(userId).then(result => {
		user.value = result;
		console.log('获取到用户信息:', user.value);

		userStatus().then(res => {
			console.log('获取到状态信息:', res);
			const userStatusList = res.userStatusList || [];

			// 更新各阶段时间
			for (let i = 0; i < progressStages.value.length; i++) {
				const stage = progressStages.value[i];

				// 设置当前阶段索引
				if (user.value.politicalStatus === stage.title) {
					currentIndex.value = i;
				}

				// 更新每个阶段的时间
				userStatusList.forEach(item => {
					if (item.status === stage.title) {
						progressStages.value[i].desc = item.updateTime;

						// 如果是当前阶段，更新当前阶段时间
						if (user.value.politicalStatus === stage.title) {
							currentStageTime.value = item.updateTime;
						}
					}
				});
			}

			// 隐藏加载中
			uni.hideLoading();
		}).catch((err) => {
			console.error('获取用户状态失败:', err);
			uni.hideLoading();
			uni.showToast({
				title: '获取进度信息失败',
				icon: 'none'
			});
		});
	}).catch((err) => {
		console.error('获取用户信息失败:', err);
		uni.hideLoading();
		uni.showToast({
			title: '获取用户信息失败',
			icon: 'none'
		});
	});
});
</script>

<style lang="scss">
.progress-page {
	background-color: #f8f8f8;
	min-height: 100vh;
	padding-bottom: 40rpx;

	.page-header {
		background: linear-gradient(135deg, #ff7a45, #ff9c6e);
		padding: 40rpx 30rpx 80rpx;
		color: #fff;

		.header-content {
			padding-top: 40rpx;

			.title {
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.subtitle {
				font-size: 28rpx;
				opacity: 0.8;
			}
		}
	}

	.progress-info {
		margin: 0 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: -60rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.current-status,
		.join-time {
			.label {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 10rpx;
			}

			.value {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;

				.status-badge {
					display: inline-block;
					padding: 8rpx 20rpx;
					background: #FFF4F0;
					color: #FF7A45;
					border-radius: 30rpx;
					font-size: 28rpx;
				}
			}
		}
	}

	.progress-card {
		margin: 0 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

		.card-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 30rpx;
			padding-left: 20rpx;
			border-left: 8rpx solid #FF7A45;
		}

		.progress-container {
			padding: 20rpx 0 0;

			.stage-desc {
				margin-top: 40rpx;
				padding: 30rpx;
				background-color: #FFF9F6;
				border-radius: 15rpx;
				border: 1rpx dashed rgba(255, 122, 69, 0.3);

				.desc-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #FF7A45;
					margin-bottom: 15rpx;
				}

				.desc-content {
					font-size: 28rpx;
					color: #666;
					line-height: 1.5;
				}
			}
		}
	}
}
</style>